import React, { ReactElement, useContext } from 'react';
import { View, Text, Image } from 'react-native';
import { filter } from 'ramda';

import styles from './style';
import { Store } from '../../reducer';
import Button from '../../../../../../components/Button';
import { Item } from '../../types';
import { rightArrow } from '../../../../../../constant/resource';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { items } = state;

  const showItems = filter((item: Item): boolean => !!item.show)(items);

  return (
    <View style={styles.container}>
      {showItems.map(
        (item): ReactElement => {
          const { icon, action, title, subTitle, needArrow, isLine } = item;
          if (isLine) {
            return <View key={item.title || 'isLine'} style={styles.line} />;
          }

          return (
            <Button
              key={item.title}
              style={styles.button}
              onPress={(): void => {
                if (action) action();
              }}
            >
              <View style={styles.loadTitle}>
                {icon && (
                  <Image
                    source={icon}
                    style={styles.icon}
                    resizeMode="contain"
                  />
                )}
                <Text style={styles.title}>{title}</Text>
              </View>
              {subTitle ? (
                <Text style={styles.subTitle}>{subTitle}</Text>
              ) : null}
              {needArrow ? (
                <Image
                  source={rightArrow}
                  style={styles.arrow}
                  resizeMode="contain"
                />
              ) : null}
            </Button>
          );
        }
      )}
    </View>
  );
};
